<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<title>Document</title> 

<style> 

caption { 

font-size: 24px; 

font-weight: bold; 

margin: 10px; 

} 

</style> 

</head> 

<body> 

<script> 

let students = [ 

{ name: '小明', age: 18, gender: '男', hometown: '河北省' }, 

{ name: '小红', age: 19, gender: '女', hometown: '河南省' }, 

{ name: '小刚', age: 17, gender: '男', hometown: ' 山西省' }, 

{ name: '小丽', age: 18, gender: '女', hometown: ' 山东省' } 

] 

document.write(`<table align="center" border="1" width="800px" height="400px" cellpadding="10px" cellspacing="0px" cellpadding="0px"> 

<caption> 

学生列表 

</caption> 

<tr> 

<th>序号</th> 

<th>姓名</th> 

<th>年龄</th> 

<th>性别</th> 

<th>家乡</th> 

</tr>`) 

for (let i = 0; i < students.length; i++) { 

document.write(` 

<tr> 

<td>${i + 1}</td> 

<td>${students[i].name}</td> 

<td>${students[i].age}</td> 

<td>${students[i].gender}</td> 

<td>${students[i].hometown}</td> 

</tr> 

`) 

} 

document.write(`</table>`) 

</script> 

</body> 

</html>